<template>
  <div class="container">
    <!-- 搜索表单 -->
    <el-form :model="queryForm" class="search-form">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="订单类型">
            <el-select v-model="queryForm.orderType" placeholder="全部">
              <el-option label="全部" value="" />
              <el-option label="入库" value="in" />
              <el-option label="出库" value="out" />
              <el-option label="移库" value="transfer" />
              <el-option label="盘库" value="check" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="仓库">
            <el-select v-model="queryForm.warehouse" placeholder="请选择仓库">
              <el-option label="苏州园区" value="suzhou" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="操作单号">
            <el-input v-model="queryForm.orderNo" placeholder="请输入操作单号" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品名称">
            <el-input v-model="queryForm.productName" placeholder="请输入商品名称" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="操作时间">
            <el-date-picker
              v-model="queryForm.operationTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="12">
          <div class="form-actions">
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="orderNo" label="操作单号" width="150" />
      <el-table-column prop="product" label="商品信息">
        <template #default="{ row }">
          <div>{{ row.product.name }}</div>
          <div class="spec">规格编号：{{ row.product.specCode }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="specName" label="规格信息" width="120" />
      <el-table-column prop="orderType" label="订单类型" width="100">
        <template #default="{ row }">
          <el-tag :type="row.orderType === 'out' ? 'danger' : 'success'">
            {{ row.orderType === 'out' ? '出库' : '入库' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="warehouse" label="仓库" width="120" />
      <el-table-column prop="beforeQty" label="操作前" width="100" />
      <el-table-column prop="afterQty" label="操作后" width="100" />
      <el-table-column label="数量/金额（元）" width="150">
        <template #default="{ row }">
          <div>数量：{{ row.quantity }}</div>
          <div v-if="row.amount">金额：{{ row.amount }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="operationTime" label="操作时间" width="180" />
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

interface StockRecord {
  orderNo: string
  product: {
    name: string
    specCode: string
  }
  specName: string
  orderType: 'in' | 'out'
  warehouse: string
  beforeQty: string
  afterQty: string
  quantity: string
  amount?: string
  operationTime: string
}

// 查询表单
const queryForm = reactive({
  orderType: '',
  warehouse: '',
  orderNo: '',
  productName: '',
  operationTime: []
})

// 表格数据
const tableData = ref<StockRecord[]>([
  {
    orderNo: 'CK03106149',
    product: { name: '华为nova flip 黑', specCode: '00001' },
    specName: '黑',
    orderType: 'out',
    warehouse: '苏州园区',
    beforeQty: '9,888',
    afterQty: '0',
    quantity: '-9,888',
    operationTime: '2025-03-10 14:25:38'
  },
  {
    orderNo: 'RK03105941',
    product: { name: '小米空调', specCode: '1111' },
    specName: '1P',
    orderType: 'in',
    warehouse: '苏州园区',
    beforeQty: '15,118',
    afterQty: '15,122',
    quantity: '4',
    operationTime: '2025-03-10 11:30:11'
  }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
</script>

<style scoped>
.container {
  padding: 20px;
  background: #fff;
}

.search-form {
  margin-bottom: 20px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.el-form-item {
  margin-bottom: 16px;
}

.spec {
  color: #666;
  font-size: 12px;
}

.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}

.el-tag {
  padding: 0 8px;
}
</style>